<template>
  <div>
    <lay-card>
      <p class="header-title">表格选择器</p>
    </lay-card>
    <lay-container :fluid="true" style="padding: 10px;padding-top: 0px;">
      <lay-card>
        <template #title>单选</template>
        <TableSelect allow-clear v-model="data" id="id" label="name" placeholder="请选择" :columns="columns"
                     :data-fun="getData"></TableSelect>
        <pre>{{ data }}</pre>
      </lay-card>

      <lay-card style="overflow: auto;height: 300px">
        <template #title>多选</template>
        <TableSelect allow-clear v-model="data1" id="id" label="name" placeholder="请选择" :columns="columns"
                     :min-collapsed-num="1" multiple :data-fun="getData">
          <template #status="{row}">{{row.status}}</template>
        </TableSelect>
        <pre>{{data1}}</pre>
      </lay-card>

    </lay-container>
  </div>
</template>

<script lang="ts" setup>
import TableSelect from "@/components/JTableSelect/index.vue"

const columns = ref([
  {title: "编号", width: "80px", key: "id", fixed: "left", sort: "desc"},
  {title: "姓名", width: "80px", key: "name", sort: "desc"},
  {title: "状态", width: "180px", key: "status", customSlot: "status"},
  {title: "邮箱", width: "120px", key: "email"},
  {title: "性别", width: "80px", key: "sex"},
  {title: "年龄", width: "80px", key: "age"},
  {title: "城市", width: "120px", key: "city"},
  {title: "签名", width: "260px", key: "remark"},
  {title: "时间", width: "120px", key: "joinTime"},
]);
const data = ref("")
const data1 = ref([
  {
    name: "张三",
    id: "1",
  }
])

async function getData() {
  return new Promise((resolve, reject) => {
    resolve(
        {
          total: 10,
          data: [
            {
              id: "1",
              name: "张三1",
              email: "test@qq.com",
              sex: "男",
              city: "浙江杭州",
              age: "18",
              remark: '花开堪折直须折,莫待无花空折枝.',
              joinTime: "2022-02-09",
              status: true
            },
            {
              id: "2",
              name: "张三2",
              email: "test@qq.com",
              sex: "男",
              city: "浙江杭州",
              age: "20",
              remark: '花开堪折直须折,莫待无花空折枝.',
              joinTime: "2022-02-09",
              status: true
            },
            {
              id: "3",
              name: "张三3",
              email: "test@qq.com",
              sex: "男",
              city: "浙江杭州",
              age: "20",
              remark: '花开堪折直须折,莫待无花空折枝.',
              joinTime: "2022-02-09",
              status: true
            },
            {
              id: "4",
              name: "张三4",
              email: "test@qq.com",
              sex: "男",
              city: "浙江杭州",
              age: "20",
              remark: '花开堪折直须折,莫待无花空折枝.',
              joinTime: "2022-02-09",
              status: true
            },
            {
              id: "5",
              name: "张三5",
              email: "test@qq.com",
              sex: "男",
              city: "浙江杭州",
              age: "20",
              remark: '花开堪折直须折,莫待无花空折枝.',
              joinTime: "2022-02-09",
              status: true
            },
            {
              id: "6",
              name: "张三6",
              email: "test@qq.com",
              sex: "男",
              city: "浙江杭州",
              age: "20",
              remark: '花开堪折直须折,莫待无花空折枝.',
              joinTime: "2022-02-09",
              status: true
            },
            {
              id: "7",
              name: "张三7",
              email: "test@qq.com",
              sex: "男",
              city: "浙江杭州",
              age: "18",
              remark: '花开堪折直须折,莫待无花空折枝.',
              joinTime: "2022-02-09",
              status: true
            },
            {
              id: "8",
              name: "张三8",
              email: "test@qq.com",
              sex: "男",
              city: "浙江杭州",
              age: "20",
              remark: '花开堪折直须折,莫待无花空折枝.',
              joinTime: "2022-02-09",
              status: true
            },
            {
              id: "9",
              name: "张三9",
              email: "test@qq.com",
              sex: "男",
              city: "浙江杭州",
              age: "20",
              remark: '花开堪折直须折,莫待无花空折枝.',
              joinTime: "2022-02-09",
              status: true
            },
            {
              id: "10",
              name: "张三10",
              email: "test@qq.com",
              sex: "男",
              city: "浙江杭州",
              age: "20",
              remark: '花开堪折直须折,莫待无花空折枝.',
              joinTime: "2022-02-09",
              status: true
            }
          ]
        }
    )
  })
}
</script>

<style scoped>
.header-title {
  font-size: 20px;
  font-weight: 500;
  margin-top: 12px;
  margin-bottom: 20px;
}

.header-describe {
  font-size: 14px;
  margin-bottom: 12px;
}
</style>
